<template>
  <div class="sys-org-container">
    <el-dialog
      v-model="state.isShowDialog"
      draggable
      :close-on-click-modal="false"
      width="1000px"
    >
      <template #header>
        <div style="color: #fff">
          <el-icon
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          >
            <ele-Edit />
          </el-icon>
          <span> {{ props.title }} </span>
        </div>
      </template>
      <div>
        <screeningCondition :inquireInfo="state.inquireInfo" @getChildren="handleQuery">
				</screeningCondition>
        <el-table
          :data="state.allAreaData"
          style="width: 100%"
          row-key="storageNum"
          default-expand-all
          @select="select"
          @row-click="rowClick"
          @selection-change="selectionLineChangeHandle" 
          ref="tableRef"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column type="index" label="序号" width="55" ></el-table-column>
          <el-table-column
            prop="storageNum"
            label="库位编号"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="storageName"
            label="库位名称"
            header-align="center"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
        <el-pagination
          v-model:current-page="state.queryParams.page"
          v-model:page-size="state.queryParams.pageSize"
          :page-sizes="[10,20,30,40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :small="true"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive,ref } from "vue";
import { WmsApi } from "/@/api/wh";
import screeningCondition from "/@/views/tools/screeningCondition.vue";
const tableRef = ref();

const props = defineProps({
  title: String,
  // 父组件传入的区域编号
  type: String,
  go:Number
});
const emits = defineEmits(["handleQuery"]);

const state = reactive({
  isShowDialog: false,
  total: 0,
  dataonLineListSelections: [],
  allAreaData: [],
  queryParams: {
    page: 1,
    pageSize: 10
  },
  roadwayNums: [],
  shelfNums: [],
  type: "",
  inquireInfo: [
			{
				label: "库位编号",
				value: "",
				key: "storageNum",
				options: [],
				type: "input",
			},
			{
				label: "库位名称",
				value: "",
				key: "storageName",
				options: [],
				type: "input",
			}
		],
    //先前的搜索条件，分页时会没有之前保存的条件，所以需要找个变量保存下来
    value:{}
});

onMounted(async () => {
  handleQuery(state.queryParams);
});

// 打开弹窗
const openDialog = async() => {
  getList();
};

const getList = () => {
  // console.log("传入的参数为",props);
  // console.log(value);
  // //区分是移到哪里的位置还是移走的位置,走不同的接口
  // state.value = value;
	console.log(props.type);
  if(props.go){
    WmsApi()
    .RegionNotStoragePost(
      props.type,state.queryParams.page,state.queryParams.pageSize
    )
    .then(function (res) {
      state.allAreaData = res.data.result.items;
      state.total = res.data.result.total;
      state.isShowDialog = true;
      console.log(state.allAreaData);
    })
    .catch(function (error) {
      console.log(error);
      
    });
  }else{
    WmsApi()
    .RegionStoragePost(
      {regionNum:props.type,page:state.queryParams.page,pageSize:state.queryParams.pageSize}
    )
    .then(function (res) {
      state.allAreaData = res.data.result.items;
      state.total = res.data.result.total;
      state.isShowDialog = true;
      console.log(state.allAreaData);
    })
    .catch(function (error) {
      console.log(error);
      
    });
  }

    
  }

// 关闭弹窗
const closeDialog = () => {
  emits("handleQuery", state.dataonLineListSelections);
  state.isShowDialog = false;
      //关闭弹窗后取消全部选择
  tableRef.value.clearSelection()
};
const selectionLineChangeHandle = (val) => {
        	// 将选中的数据存储起来
            console.log(val);
      
        state.dataonLineListSelections = val
    }
    //手动勾选数据行的 Checkbox
    const select=(selection, row)=>{
	// 清除 所有勾选项
	tableRef.value.clearSelection()
	// 当表格数据都没有被勾选的时候 就返回
	// 主要用于将当前勾选的表格状态清除
    console.log(selection.length);
	if(selection.length == 0) return 
    console.log(tableRef.value);
	tableRef.value.setCurrentRow(row, true);
}

// 表格某一行的单击事件，处理单选功能
const rowClick=(row, column)=>{
    const selectData = state.dataonLineListSelections
    tableRef.value.clearSelection()
    if( selectData.length == 1 ) {
        selectData.forEach(item => {
        	// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
            if (item == row) {
                tableRef.value.toggleRowSelection(row, false);
            }
            // 不然就让当前的一行勾选
            else {
                tableRef.value.toggleRowSelection(row, true);
            }
        })
    } 
    else {
        tableRef.value.toggleRowSelection(row, true);
    }
}
const handleQuery = (value) => {
        console.log(value);
        state.preCondition = value
        var params = {
            page: state.queryParams.page,
            pageSize: state.queryParams.pageSize,
            storageNum: value.storageNum,
            storageName: value.storageName
        }
        WmsApi().eGStoragePagePost(params)
            .then(function (res) {
                console.log(res);
                state.allAreaData = res.data.result.items;
                state.total = res.data.result.total;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
// 取消
const cancel = () => {
  state.isShowDialog = false;
};

// 提交
const submit = () => {
  closeDialog();
};
// const selectionLineChangeHandle = (val) => {
//   state.dataonLineListSelections = val;
// if(state.dataonLineListSelections.length>1){
//   console.log(state.dataonLineListSelections);
//   //让对象包裹在数组里面
//   state.dataonLineListSelections = [state.dataonLineListSelections[state.dataonLineListSelections.length-1]]
// }
//   console.log(state.dataonLineListSelections);
    
// };
const handleSizeChange = (val) => {
  state.queryParams.pageSize = val;
  getList();
};
const handleCurrentChange = (newVal) => {
  state.queryParams.page = newVal;
  getList();
};
// 导出对象
defineExpose({ openDialog });
</script>
